<template>
  <div
    id="echart"
    class="echart_container"
    ref="echart"
    :style="containerStyle"
  ></div>
</template>
<script>
// echarts 按需引入
import * as echarts from "echarts/core";
import {
  TitleComponent,
  GridComponent,
  TooltipComponent,
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TitleComponent,
  GridComponent,
  TooltipComponent,
  BarChart,
  CanvasRenderer,
]);

export default {
  name: "echartLine",
  // props:{
  //   echartBox:{
  //     type:String,
  //     default(){
  //       return null
  //     }

  //   },
  //   element:{
  //     type:Object,
  //     default(){
  //       return null
  //     }
  //   },
  //   options:{
  //     type:Object,
  //     default(){
  //       return null
  //     }
  //   }
  // },
  data() {
    return {
      element: null,
      // options:{
      //   title: {
      //     text: "ECharts 入门示例",
      //   },
      //   tooltip: {},
      //   xAxis: {
      //     data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      //   },
      //   yAxis: {},
      //   series: [
      //     {
      //       name: "销量",
      //       type: "bar",
      //       data: [5, 20, 36, 10, 10, 20],
      //     },
      //   ],
      // },
      options: {
         title: {
          text: "项目数量",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["Evaporation", "Precipitation", "Temperature"],
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "Precipitation",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value} ml",
            },
          },
          // {
          //   type: "value",
          //   name: "Temperature",
          //   min: 0,
          //   max: 25,
          //   interval: 5,
          //   axisLabel: {
          //     formatter: "{value} °C",
          //   },
          // },
        ],
        series: [
          {
            name: "Evaporation",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " ml";
              },
            },
            data: [
              88.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
          },
          {
            name: "Precipitation",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " ml";
              },
            },
            data: [
              6.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
          },
          {
            name: "Temperature",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + " °C";
              },
            },
            data: [
              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
            ],
          },
        ],
      },
      containerStyle: { width: "400px", height: "280px" },
    };
  },
  mounted() {
    this.element = this.$refs.echart;
    this.initCharts(this.element, this.options);
  },
  methods: {
    initCharts(element, options) {
      // 初始化echarts实例
      var myChart = echarts.init(element);
      // 绘制图表
      myChart.setOption(options);
    },
  },
};
</script>
<style scoped>
/* .echart_container {
  width: 576px;
  height: 280px;
  overflow: hidden;
} */
</style>